<template>
  <div>
    <h1>图书表</h1>
    <table border="6" cellspacing="0" align="center">
      <tr>
        <td>ID</td>
        <td>书名</td>
        <td>
          <button v-if="type==1" v-show="type=2" @click="fun(type)">排序</button>
          <button v-else v-show="type=1" @click="fun(type)">排序</button>
        </td>
        <td>所属</td>
      </tr>
      <tr v-for="i in data">
        <td>{{ i.id }}</td>
        <td>{{ i.name }}</td>
        <td>{{ i.price }}</td>
        <td>{{ i.eg.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "order_book",
  data() {
    return {
      data: {},
      type: 1,
    }
  },

  methods: {
    btn() {
      this.axios.get('books/').then(res => {
        console.log(res)
        this.data = res.data
      })
    },
    fun() {
      this.axios.get('order/?type=' + this.type).then(res => {
        console.log(res)
        this.data = res.data
      })
    }
  },

  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>
